<template>
	<view class="container" v-if="!isLoading">
		<view class="my-service mb30">
			<view class="service-title pb10">我的邀请人</view>
			<view class="service-content clearfix">
				<view class="user-info">
					<view class="user-avatar">
						<avatar-image :url="userInfo.share.avatar_url" :width="100" />
					</view>
					<view class="user-content">
						<!-- 会员昵称 -->
						<view class="nick-name oneline-hide">{{ userInfo.share.nick_name || '暂无邀请人' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="space-upper">
			<view class="flex justify-center align-center flex-column" v-if="userInfo.share_id>0">
				<image style="width: 550rpx;" :src="qrcode" mode="widthFix" @click="onPreviewImage()"></image>
				<view class="flex pt20 f14px">
					我的邀请码：{{ userInfo.code }}
					<view class="act-copy" @click="handleCopy(userInfo.code)">
						<text>复制</text>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="pt20 f14px">您还没有邀请人，暂时无法邀请粉丝加入！</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	import AvatarImage from '@/components/avatar-image'

	export default {
		components: {
			AvatarImage
		},
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 会员信息
				userInfo: {},
				qrcode: ''
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onShow(options) {
			// 获取页面数据
			this.getPageData()
		},

		methods: {

			// 获取页面数据
			getPageData() {
				const app = this
				app.isLoading = true
				Promise.all([app.getUserInfo(), app.getQrcode()])
					.then(() => app.isLoading = false)
			},

			// 获取会员信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					UserApi.info()
						.then(result => {
							app.userInfo = result.data.userInfo
							resolve(app.userInfo)
						})
				})
			},
			// 获取会员信息
			getQrcode() {
				const app = this
				return new Promise((resolve, reject) => {
					UserApi.qrcode()
						.then(result => {
							console.log(result)
							app.qrcode = result.data.qrcode
							resolve(app.qrcode)
						})
				})
			},
			onPreviewImage() {
				const app = this
				uni.previewImage({
					current: app.qrcode,
					urls: [app.qrcode]
				})
			},
			// 复制指定内容
			handleCopy(value) {
				const app = this
				uni.setClipboardData({
					data: value,
					success() {
						app.$toast('复制成功')
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		background: #f4f4f4;
		min-height: 100vh;
	}

	.space-upper {
		// padding: 150rpx 0 0;
		text-align: center;
	}

	.wallet-image image {
		width: 360rpx;
		height: 261.72rpx;
	}

	.wallet-account {
		margin-top: 20rpx;
	}

	.wallet-account_balance {
		font-size: 56rpx;
	}

	.wallet-account_lable {
		margin-top: 14rpx;
		// color: #cec1c1;
		font-size: 26rpx;
	}

	.space-lower {
		margin-top: 30rpx;
		padding: 0 110rpx;
	}

	.btn-recharge .btn-submit {
		width: 460rpx;
		height: 84rpx;
		margin: 0 auto;
		border-radius: 50rpx;
		background: #786cff;
		color: white;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-lable {
		margin-top: 80rpx;
		font-size: 28rpx;
		color: rgb(94, 94, 94);
		padding: 0 100rpx;
	}

	// 我的服务
	.my-service {
		background: #fff;
		padding: 30rpx;
		width: 94%;
		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		margin: 22rpx auto 22rpx auto;

		.service-title {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			border-bottom: 1px solid #f4f4f4;
			line-height: 60rpx;
		}

		.service-content {}
	}

	.user-info {
		display: flex;

		.nick-name {
			line-height: 100rpx;
			margin-left: 20rpx;
		}
	}

	.act-copy {
		margin-left: 20rpx;
		padding: 2rpx 20rpx;
		font-size: 22rpx;
		color: #666;
		border: 1rpx solid #c1c1c1;
		border-radius: 16rpx;
	}
</style>